<template>
  <div class="search">
    <el-form
      label-position="right"
      label-width="80px"
      :model="searchForm"
      ref="searchFormRef"
      size="small"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="政策名称" prop="policyName">
            <el-input
              placeholder="请输入政策名称"
              v-model="searchForm.policyName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="政策号" prop="policyNo">
            <el-input
              placeholder="请输入政策号"
              v-model="searchForm.policyNo"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="代理号" prop="agentCode">
            <el-select
              v-model="searchForm.agentCode"
              multiple
              collapse-tags
              clearable
              placeholder="请选择代理号"
            >
              <el-option
                v-for="{ name } in selectArr"
                :key="name"
                :label="name"
                :value="name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数据类型" prop="status">
            <el-radio-group v-model="searchForm.status">
              <el-radio :label="undefined">全部</el-radio>
              <el-radio :label="0">有效数据</el-radio>
              <el-radio :label="1">历史数据</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <search-btn
          ref="searchBtn"
          @handleSearch="handleSearch"
          @handleRest="handleRest"
        />
        <el-col :span="5">
          <el-form-item label="日期选择" prop="date">
            <el-date-picker
              v-model="searchForm.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="table">
    <el-table :data="data" stripe style="width: 100%" row-key="id" height="500">
      <el-table-column
        align="center"
        prop="policyName"
        label="政策名称(政策号）"
      >
        <template #default="{ row }">
          <el-link href="javascript:;" type="primary">{{
            row.policyName
          }}</el-link>
          <div>{{ row.policyNo }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="agentList" label="适用代理" width="120">
        <template #default="{ row }">
          <el-link
            href="javascript:;"
            type="primary"
            @click="handleAlert(row.id)"
            >查看列表</el-link
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="startDate"
        label="生效期限"
        width="180"
      >
        <template #default="{ row }">
          <div>
            <div>开始：{{ row.startDate }}</div>
            <div>结束：{{ row.endDate }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="165">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <span>{{ status[row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作" width="100">
        <template #default="{ row }">
          <div>
            <el-popover
              placement="top-start"
              :width="160"
              trigger="hover"
              v-if="row.status !== 1"
            >
              <div>是否作废该数据？</div>
              <div style="text-align: right">
                <el-button size="mini" @click="handleDelete(row.id)"
                  >是</el-button
                >
              </div>
              <template #reference>
                <el-link href="javascript:;" type="primary">作废</el-link>
              </template>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createUser" label="创建人" width="100">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="abolishUser" label="作废人" width="100">
      </el-table-column>
      <el-table-column prop="endDate" label="作废时间" width="180">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
  <component
    :is="isComponent"
    :policyId="policyId"
    @handleClose="handleClose"
  />
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, toRefs } from 'vue'
import SearchBtn from 'components/common/SearchBtn.vue'
import AgentList from '@/views/rariffMaintenance/Basics/components/alert/AgentList.vue'
import { ElMessage, ElForm } from 'element-plus'
import { $select } from '@/service/common'
import { $rariff } from '@/service/rariffMaintenance'
import { pagingConfig, status } from '@/assets/common'
import { sortTable } from '@/utils/hooks/tableSort'
import { policyDropCol } from '@/views/rariffMaintenance/Basics/components/config'
import { alertListAction } from '@/utils/hooks/alertList'

export default defineComponent({
  name: 'PolicyManagement',
  props: {
    isImport: {
      type: String,
      default: ''
    }
  },
  components: {
    SearchBtn,
    AgentList
  },
  setup() {
    const visible = ref(false)

    // region 分页
    const pagingConf = reactive({
      ...pagingConfig
    })
    const handleSizeChange = (val: number) => {
      searchForm.size = val
      handleSearch()
    }
    const handleCurrentChange = (val: number) => {
      searchForm.page = val
      handleSearch()
    }
    // endregion

    // region 查询 重置
    const searchForm = reactive({
      policyName: '',
      policyNo: '',
      agentCode: '',
      status: undefined,
      date: [],
      page: 1,
      size: 20
    })
    const searchBtn = ref<InstanceType<typeof SearchBtn>>()
    const data = ref()
    const handleSearch = () => {
      $rariff
        .findPage(searchForm)
        .then((res) => {
          pagingConf.total = res.data.total
          pagingConf.pageSize = res.data.size
          pagingConf.currentPage = res.data.page
          data.value = res.data.records
        })
        .catch((err) => {
          ElMessage.error(err)
        })
        .finally(() => searchBtn.value?.handleCloseLoading())
    }
    const searchFormRef = ref<InstanceType<typeof ElForm>>()
    const handleRest = () => {
      searchFormRef.value?.resetFields()
      handleSearch()
    }
    // endregion

    // region 获取下拉框值
    const selectArr = ref()
    onMounted(async () => {
      const { data } = await $select.select()
      selectArr.value = data
    })
    // endregion

    // region 拖拽
    const dropColArr = ref(policyDropCol)
    sortTable(data, dropColArr)
    // endregion

    // region 弹框
    const { isComponent, policyId, handleAlert, handleClose } =
      alertListAction('AgentList')

    // endregion

    // region 作废
    const handleDelete = async (id: number) => {
      const { data } = await $rariff.updateStatus(id)
      ElMessage.success({
        message: data,
        type: 'success'
      })
      handleSearch()
    }
    // endregion
    return {
      searchBtn,
      selectArr,
      searchForm,
      data,
      status,
      searchFormRef,
      isComponent,
      visible,
      policyId,
      ...toRefs(pagingConf),
      handleSearch,
      handleSizeChange,
      handleRest,
      handleCurrentChange,
      handleAlert,
      handleClose,
      handleDelete
    }
  }
})
</script>

<style scoped lang="less">
/deep/.el-date-editor {
  width: 100%;
}
/deep/.el-input__inner {
  max-height: 32px;
}
/deep/.el-select__tags {
  height: 25px;
}
/deep/.el-table,
/deep/.el-table__empty-block {
  height: calc(100vh - 300px) !important;
}
/deep/.el-radio {
  margin-right: 2px;
}
/deep/.el-radio__label {
  padding-left: 8px;
  font-size: 8px;
}
</style>
